﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<link href="login/login.css" type="text/css" rel="STYLESHEET" />
<link href="styles/jbox/jbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="styles/jbox/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="styles/jbox/jquery.jBox-2.3.min.js"></script>
<script type="text/javascript" src="styles/jbox/jquery.jBox-zh-CN.js"></script>
<style type="text/css">
img {
	cursor: pointer;
}

.divLink {
	margin: 0px auto;
	width: 430px;
	color: White;
}

.divLink a {
	font: 12px Arial, "宋体", Helvetica, sans-serif;
	color: White;
	margin: 0px 2px;
}

.code {
	width: 60px;
	position: relative;
	font-style: italic;
	color: green;
	border: 0;
	padding: 2px 3px;
	font-weight: bolder;
}
</style>
<script type="text/javascript">
	var path = '${CONTEXT_PATH}';

	var code; //在全局 定义验证码
	function createCode() {
		code = new Array();
		var codeLength = 4;//验证码的长度
		var checkCode = document.getElementById("checkCode");
		checkCode.value = "";

		var selectChar = new Array(2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D',
				'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R',
				'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');

		for (var i = 0; i < codeLength; i++) {
			var charIndex = Math.floor(Math.random() * 32);
			code += selectChar[charIndex];
		}
		if (code.length != codeLength) {
			createCode();
		}
		checkCode.value = code;
	}

	function funCheckLogin() {
		var cc = $.trim($("#yanzheng").val()).toUpperCase();
		if ($.trim($("#txtUserName").val()) == "") { //判断用户名是否为空
			$.jBox.tip("请输入您的用户名。", 'error', {
				focusId : "txtUserName"
			});
		} else if ($("#txtPWD").val() == "") {//判断密码是否为空
			$.jBox.tip("请输入您的密码。", 'error', {
				focusId : "txtPWD"
			});
		} else if ($.trim($("#yanzheng").val()) == "") {//判断验证码是否为空
			$.jBox.tip("请输入您的验证码。", 'error', {
				focusId : "txtCheckImg"
			});
		} else if (cc != code) {
			$("#yanzheng").val("");
			$.jBox.tip("验证码错误，请重新输入。", 'error', {
				focusId : "txtCheckImg"
			});
			createCode();
		} else {
			login();
		}
	}
	function checkLogin(e) {
		if (!e)
			e = window.event;
		if ((e.keyCode || e.which) == 13) {
			funCheckLogin();
		}
	}
	//重置
	function funReset() {
		$("#txtUserName").val("");
		$("#txtPWD").val("");
		$("#yanzheng").val("");
		$("#txtUserName").focus();
		createCode();
	}
	function login() {
		var username = $.trim($("#txtUserName").val());
		var psd = $("#txtPWD").val();
		$.post("loginP", {
			"username" : username,
			"password" : psd
		}, function(data) {
			var obj = eval(data);
			switch (obj.code) {
			case "200":
				window.location.href = path;
				break;
			default:
				$.jBox.tip(obj.msg, 'error', {
					focusId : "txtPWD"
				});
				$("#txtPWD").val("");
				$("#yanzheng").val("");
				$("#txtPWD").focus();
				createCode();
				break;
			}
		}, "json");
	}
</script>
</head>
<body background="images/Loginbg.jpg" onLoad="createCode();"
	onkeydown="checkLogin(event);">
	<form id="frmLogin" name="form1" defaultbutton="imgLogin"
		action="login/" style="margin: 0; padding: 0;">
		<div style="margin: 100px auto; width: 720px;">
			<table width="100%" border="0" cellpadding="0" cellspacing="0"
				style="background: url(images/login.jpg) no-repeat left top;">
				<tr style="height: 130px">
					<td colspan="2"></td>
				</tr>
				<tr style="height: 150px; width: 100%">
					<td style="width: 420px;"></td>
					<td style="width: 300px;">
						<table>
							<tr>
								<td height="40px" width="50px" align="right"><strong>账&nbsp;号</strong><span
									style="font-size: 12px; color: #000000"><strong>：</strong></span>
								</td>
								<td colspan="2"><input type="text" name="username"
									id="txtUserName" style="height: 25px; width: 150px" /></td>
							</tr>
							<tr>
								<td height="40px" width="50px" align="right"><strong>密&nbsp;码</strong><span
									style="font-size: 12px; color: #000000"><strong>：</strong></span>
								</td>
								<td colspan="2"><input type="password" name="password"
									id="txtPWD" style="height: 25px; width: 150px" /></td>
							</tr>
							<tr>
								<td height="40px" width="70px" align="right"><strong>验证码</strong><span
									style="font-size: 12px; color: #000000"><strong>：</strong></span>
								</td>
								<td style="text-align: left;" width="85px"><input
									type="text" id="yanzheng" style="height: 25px; width: 80px" />
								</td>
								<td align="left"><input id="checkCode" class="code"
									style="text-align: center;" onClick="createCode()" /></td>
							</tr>
						</table>
					</td>
				</tr>
				<tr style="width: 100%">
					<td height="100" align="right" valign="top"
						style="padding-right: 60px; text-align: right;" colspan="2">
						&nbsp; <img id="imgLogin" src="images/login_button.png"
						onclick="funCheckLogin();" alt="登录" /> &nbsp;&nbsp; <img
						id="imgReset" src="images/reset_button.png" onclick="funReset();"
						alt="重置" />
					</td>
				</tr>
			</table>

		</div>
	</form>
</body>
</html>
